import React, { useRef, useEffect } from "react";

import "../../../assets/sass/home_page/free_templates/featured_picks/banner/banner.css";
const Banner = () => {
  const bannerImageList = [
    "/src/assets/image/home_page/banner/banner_1.jpg",
    "/src/assets/image/home_page/banner/banner_2.jpg",
    "/src/assets/image/home_page/banner/banner_3.jpg",
    "/src/assets/image/home_page/banner/banner_4.jpg",
    "/src/assets/image/home_page/banner/banner_5.jpg",
    "/src/assets/image/home_page/banner/banner_6.jpg",
    "/src/assets/image/home_page/banner/banner_7.jpg",
    "/src/assets/image/home_page/banner/banner_8.jpg",
  ];

  const bannerRef = useRef(null);

  useEffect(() => {
    bannerScroll();
  }, []);

  const bannerScroll = () => {};

  const bannerItemLeave = () => {
    const doms = document.querySelectorAll(".banner_item");
    doms.forEach((item) => {
      item.classList.add("banner_item_leave");
    });
  };

  const next = () => {};

  const prev = () => {};
  return (
    <div className="banner_box">
      <div className="content_banner" onScroll={bannerScroll}>
        <div className="banner" ref={bannerRef}>
          {bannerImageList &&
            bannerImageList.map((item, index) => {
              return (
                <div
                  className="banner_item"
                  key={index}
                  onMouseLeave={bannerItemLeave}
                >
                  <img src={item} />
                </div>
              );
            })}
        </div>
      </div>
      <div className="banner_prev" onClick={prev}>
        &lt;
      </div>
      <div className="banner_next" onClick={next}>
        &gt;
      </div>
    </div>
  );
};

export default Banner;
